<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/backend' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>博文管理</el-breadcrumb-item>
      <el-breadcrumb-item>编辑标签</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="10">
          <el-input
            placeholder="输入内容查找相似的标签"
            class="input-with-select"
            v-model="queryTags.query"
            clearable
            @change="getTagList"
          >
            <el-button slot="append" icon="el-icon-search" @click="getTagList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="dialogFormVisible = true">添加标签</el-button>
          <el-dialog title="添加标签" :visible.sync="dialogFormVisible">
            <el-form :model="addTags" :rules="rules" ref="addTags" label-width="100px" class="addTags-form">
              <el-form-item label="标签" prop="sortName">
                <el-input v-model="addTags.sortName"></el-input>
              </el-form-item>
              <el-form-item label="备注" prop="remarks">
                <el-input v-model="addTags.remarks"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('addTags')">发布</el-button>
                <el-button @click="resetForm('addTags')">重置</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
          </el-col>
      </el-row>
      <el-table stripe border :data="tagList" height="300" >
        <el-table-column type="index" label="编号"></el-table-column>
        <el-table-column prop="sortName" label="标签名"></el-table-column>
        <el-table-column prop="remarks" label="备注"></el-table-column>
        <el-table-column prop label="操作" width="180">
          <template slot-scope="scope">
            <div>
              <!--修改-->
              <el-button type="primary" icon="el-icon-edit" circle @click="editOpen(scope.row)"></el-button>
              <!-- 弹出框，修改-->
              <el-dialog title="编辑标签" :visible.sync="deitFormVisible" :modal-append-to-body='false'>
                <el-form :model="editTags" :rules="rules" ref="editTags" label-width="100px" class="Posts-form">
                  <el-form-item label="标签名" prop="sortName">
                    <el-input v-model="editTags.sortName"></el-input>
                  </el-form-item>
                  <el-form-item label="备注" prop="remarks">
                    <el-input v-model="editTags.remarks"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="edit(editTags)">修改</el-button>
                    <el-button @click="resetForm('editTags')">重置</el-button>
                  </el-form-item>
                </el-form>
              </el-dialog>
              <!--分配权限-->
              <el-button type="primary" icon="el-icon-s-tools" circle></el-button>
              <!--删除-->
              <el-button type="danger" icon="el-icon-delete" circle slot="reference"  @click="dialogVisible = true"></el-button>
              <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose"
                :modal-append-to-body='false'>
                <span>确定删除？</span>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="del(scope.row.sort_id)">确 定</el-button>
                </span>
              </el-dialog>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryTags.pagenum"
        :page-sizes="[1, 3, 5, 10]"
        :page-size="queryTags.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      queryTags: {
        query: "",
        pagenum: 1, //当前页码
        pagesize: 3 //每页显示条数
      },
      addTags: {
        sort_id:'',
        sortName:'',
        remarks:''
      },
      editTags:{
        sort_id:'',
        sortName:'',
        remarks:''
      },
      tagList: [],
      total: 0,
      rules: {
        sortName: [
          { required: true, message: '请输入文章标题', trigger: 'blur' },
          { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
        ],
        remarks: [
          { required: true, message: '请输入文章描述', trigger: 'blur' },
          { min: 0, max: 40, message: '长度在 0 到 40 个字符', trigger: 'blur' }
        ],
      },
      dialogFormVisible: false,//添加标签
      deitFormVisible:false,//修改标签
      dialogVisible: false,//删除标签
    };
  },
  created() {
    this.getTagList();
  },
  methods: {
      // 获取指定数据
    async getTagList() {
      let queryTags = this.queryTags;
      console.log(queryTags);
      const {data:res} = await this.$http.post("selTags",{queryTags});
      console.log(res);
     if (res.status !== 200) {
        this.$message.error("获取用户列表失败");
      } else {
        this.tagList = res.message;
        if(queryTags.query ==""){
          const {data:totalRes} = await this.$http.get("getknowTags");
          console.log(totalRes.message.length);
          if(totalRes.status != 200){
          this.$message.error("获取用户列表失败");
          }else{
            this.total = totalRes.message.length;
          }
        }else{
          this.total = res.message.length;
        }
        // console.log(this.tagList);
      }
      this.queryTags.query=""
    },
    // 添加文章按钮
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.Publish();
        } else {
          this.$message.error('error submit!!');
          return false;
        }
      });
    },
    // 添加标签
    async Publish(){
      this.dialogFormVisible = false;
      let addTags = JSON.stringify(this.addTags);
      console.log(this.addTags);
      const {data:res} = await this.$http.post("insertTags",{addTags});
      if(res.status != 200){
        this.$message.error('添加数据失败');
      }else{
        this.$message({
          message: '发布成功',
          type: 'success'
        });
        this.getTagList();
      }
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 每页条数
    handleSizeChange: function(newSize) {
      // console.log("newSize:"+newSize);
      this.queryTags.pagesize = newSize;
      this.getTagList();
    },
    // 第几页
    handleCurrentChange: function(current) {
      // console.log("current:"+current);
      this.queryTags.pagenum = current;
      this.getTagList();
    },
    // 修改按钮
    editOpen(item) {
      console.log(item);
      this.deitFormVisible=true;
      this.editTags = item;
    },
    // 点击修改
    async edit(edit){
      this.deitFormVisible = false;
      console.log("已修改");
      edit = JSON.stringify(edit);
      console.log(edit);
      const {data:res} = await this.$http.post("editTags",{edit});
      console.log(res);
      if(res.status != 200){
        this.$message.error("修改信息失败");
      }else{
        this.$message({
          message: '修改成功',
          type: 'success'
        });
        this.getTagList();
      }

    },
    // 删除部分
    handleClose(done){
      // this.$confirm('确定关闭？').then(_ => {
      //   done();
      // }).catch(_ => {})
    },
    async del(id) {
      this.dialogVisible = false;
      console.log("删除了");
      console.log(id);
      const {data:res} = await this.$http.post("delTags",{id});
      // // console.log(result);
      if(res.status !==200){
        return this.$message.error("添加失败")
      }else{
        this.$message.success("删除成功")
        this.getTagList();
      }

    }
  }
}
</script>
<style scoped>
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
  /* width: 150px; */
}
.box-card {
  margin: 10px 0;
}
.el-button {
  margin: 0;
}
.el-table {
  margin: 10px 0;
}
</style>
